<template>
  <div id="home">
    <div class="top-container">
      <md-icon name="home_my" class="home_my" @click="showDrawer"></md-icon>
      <div>{{title}}</div>
      <md-icon name="home_news_icon" class="home_news_icon" @click="gotoLogin"></md-icon>
    </div>
    <!-- <md-tabs class="no-content" :titles="tabs" ref="tab" :default-index="defaultIndex" @change="onTabChange"></md-tabs> -->
    <div class="swiper-container">
      <swiper :options="swiperOption">
        <swiper-slide :key="$index" v-for="(item, $index) in banners">
          <a
            @click="gotoLogin"
            target="_blank"
            class="banner-item"
            :style="{'background': 'url('+item.adv_banner+')','background-repeat':'no-repeat','background-size':'cover'}"
          ></a>
        </swiper-slide>
        <!-- <swiper-slide data-emmaBanner="e4d1c80fd2"></swiper-slide> -->
      </swiper>
    </div>
    <div class="city-selector">
      <div class="city-box">
        <div class="common-box left-box" @click="gotoLogin">
          <div>
            <div class="city-name">请选择</div>
            <div class="hint">出发地</div>
          </div>
        </div>
        <div class="exchange-box" @click="gotoLogin">
          <md-icon class="exchange-button" name="cjyc_wf_icon" size="lg"></md-icon>
        </div>
        <div class="common-box right-box" @click="gotoLogin">
          <div>
            <div class="city-name">请选择</div>
            <div class="hint">目的地</div>
          </div>
        </div>
      </div>
      <md-button class="yueche-btn" @click="gotoLogin">查看线路</md-button>
    </div>
    <md-popup class="popup" v-model="leftPopup.show" position="left">
      <div class="left-popup">
        <div class="user" @click="gotoLogin">
          <div class="user-photo">
            <img class="user-photos" :src="user_headpath" alt />
          </div>
          <div class="user-detail">
            <div class="user-name">游客</div>
          </div>
        </div>
        <div class="content">
          <md-field>
            <md-field-item class="popup-item" customized @click="onPopupItemClick(item)" :key="$index" v-for="(item,$index) in leftPopup.items">
              <md-icon :name="item.icon" slot="left" size="lg"></md-icon>
              <div class="popup-item-text" slot="default">{{item.title}}</div>
            </md-field-item>
          </md-field>
        </div>
        <!-- <div class="popup-bottom">
                            <div class="item">
                                <md-icon name="sjzm_icon"></md-icon>
                                <div>司机招募</div>
                            </div>
                            <div class="item">
                                <md-icon name="tjyj_icon"></md-icon>
                                <div>推荐有奖</div>
                            </div>
        </div>-->
      </div>
    </md-popup>
  </div>
</template>

<script>
import '@/assets/svgs/home_my.svg';
import '@/assets/svgs/home_news_icon.svg';
import '@/assets/svgs/cjyc_wf_icon.svg';
import '@/assets/svgs/qrcode.svg';
import '@/assets/svgs/grzx_wdxc_icon.svg';
import '@/assets/svgs/qianbao_icon.svg';
import '@/assets/svgs/youhui_icon.svg';
import '@/assets/svgs/grzx_sz_icon.svg';
import '@/assets/svgs/sjzm_icon.svg';
import '@/assets/svgs/tjyj_icon.svg';
import '@/assets/svgs/xiaoxitz_icon.svg';
import { Icon, Button, Dialog, Popup, PopupTitleBar, Field, FieldItem, Tabs } from 'mand-mobile';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import WxUtil from '@/common/weixinUtils';
import Utils from '@/common/pakjUtils';

export default {
  name: 'Home',
  data() {
    return {
      showTop: true,
      title: '平安到家',
      defaultIndex: 0,
      tabs: ['城际出行', '市内用车', '出租车'],
      banners: [
        {
          adv_banner: 'https://img.padj.group/adv_banner1531983447191.png',
          text: '乘客须知'
        },
        {
          adv_banner: 'https://img.padj.group/1564218132999.png',
          text: '推荐有奖'
        }
      ],
      user_headpath: require('@/assets/imgs/dt_cktx_big.png'),
      showPopupAdv: false,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      },
      leftPopup: {
        show: false,
        items: [
          {
            icon: 'grzx_wdxc_icon',
            title: '行程',
            to: 'MyAllot'
          },
          {
            icon: 'qianbao_icon',
            title: '钱包',
            to: 'MyWallet'
          },
          {
            icon: 'youhui_icon',
            title: '优惠',
            to: 'MyCoupon'
          },
          {
            icon: 'grzx_sz_icon',
            title: '设置',
            to: 'Options'
          }
        ]
      },
      code: '000000',
      openId: undefined,
      unionId: undefined
    };
  },
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Tabs.name]: Tabs,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    swiper,
    swiperSlide
  },
  created() {
    let query = this.$route.query;
    if (query) {
      if (query.code) {
        this.code = query.code;
      }
      if (query.openid) {
        this.openId = query.openid;
      }
      if (query.unionid) {
        this.unionId = query.unionid;
      }
    }
  },
  methods: {
    gotoLogin() {
      if (Utils.isMiniProgram()) {
        let url = '/pages/login/login';
        if (this.openId) {
          url += '?openid=' + this.openId;
        }
        if (this.unionId) {
          url += '&unionid=' + this.unionId;
        }
        wx.miniProgram.navigateTo({
          url: url
        });
      }
    },
    onTabChange(index, preindex) {
      this.gotoLogin();
    },
    showDrawer() {
      this.leftPopup.show = true;
    },
    onPopupItemClick(item) {
      this.gotoLogin();
    }
  }
};
</script>

<style lang="stylus">
#home {
  background-color: color-primary-background;
  height: 100vh;

  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .no-content {
    .md-tab-content-wrapper {
      height: 0px;
      min-height: 0px;
    }
  }

  .untreated_trip {
    position: absolute;
    top: 170px;
    width: 100%;
    background: rgba(51, 51, 51, 0.6);
    z-index: 99;
  }

  .untreated_trip p {
    text-align: center;
    font-size: 24px;
    color: #fff;
    height: 68px;
    line-height: 68px;
  }

  .untreated_trip p img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    position: relative;
    top: 6px;
  }

  .top-container {
    height: 80px;
    background-color: #F8F8F8;
    display: flex;
    -webkit-display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0 30px;

    .home_my {
      width: 28px;
      height: 32px;
    }

    .home_news_icon {
      width: 33px;
      height: 28px;
    }

    .xiaoxitz_icon {
      width: 42px;
      height: 36px;
      margin-right: -10px;
      margin-top: -10px;
    }
  }

  .md-tab-bar {
    background-color: #f8f8f8;
  }

  .swiper-container {
    width: 100vw;
    height: 450px;
    background-color: color-primary-background;

    .banner-item {
      float: left;
      width: 100%;
      height: 100%;
      line-height: 250px;
      text-align: center;
      font-size: 28px;
      color: #FFF;
      box-align: center;
      align-items: center;
      box-pack: center;
      justify-content: center;
      text-decoration-line: none;
    }
  }

  .city-selector {
    background-color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: -78px;
    position: relative;
    width: 710px;
    height: 340px;
    z-index: 2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .exchange-button {
      width: 56px;
      height: 56px;
    }

    .city-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 620px;
      margin: 0px 30px;
      flex: 1;

      .common-box {
        width: 300px;
        display: flex;

        .city-name {
          max-width: 6em;
          min-width: 3em;
          font-size: 40px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .hint {
          font-size: 24px;
          color: color-text-caption;
          margin-top: 6px;
          text-align: center;
        }
      }

      .left-box {
        justify-content: flex-start;
      }

      .right-box {
        justify-content: flex-end;
      }
    }

    .yueche-btn {
      width: 650px;
      height: 98px;
      margin-bottom: 50px;
    }
  }

  .left-popup {
    background-color: #fff;
    width: 540px;
    height: 100%;
    padding-left: 30px;
    padding-right: 30px;

    .user {
      height: 100px;
      display: flex;
      -webkit-display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-top: 110px;
      padding-bottom: 70px;

      .user-photo {
        width: 100px;
        height: 100px;

        .user-photos {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .user-detail {
        width: 350px;

        .user-name {
          font-size: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .user-phone {
          font-size: 30px;
          color: color-text-caption;
          text-overflow: ellipsis;
        }
      }

      .qrcode {
        color: color-text-caption;
      }
    }

    .popup-item {
      .popup-item-text {
        font-size: 30px;
      }

      padding-left: 5px;
      padding-right: 5px;
    }

    .popup-bottom {
      display: flex;
      justify-content: center;
      left: 0px;
      bottom: 35px;
      position: absolute;
      width: 100%;
      height: 118px;

      .item {
        text-align: center;
        margin-left: 64px;
        margin-right: 64px;
        font-size: 24px;
      }

      .md-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
